﻿<div>
    <table class="table table-striped table-condensed">
        <tbody data-bind="foreach: positions">
            <tr class="row">
                <td data-bind="text: Id" class="hidden"></td>
                <td class="span5">
                <a data-toggle="modal" href="#DetailsPositionDialog" data-bind="click: function() { $root.position.selectDetailsProject($data); }" >
                <h4 data-bind="text: Title"></h4>
                </a>
                    <h5 data-bind="html: Description"></h5>
                    <div data-bind="with: Industry"><button class="btn btn-mini" data-bind="text: Description, click: function() { $root.position.setIndustryId($data);}"></button></div>
                    <ul data-bind="foreach: Categories"class="btn-toolbar btn-group" style="margin-left: 0px">
                        <li class="btn-group" ><a class="btn btn-mini btn-inverse" data-bind="text: Description,click: function() { $root.position.setCategoryId($data); }"></a></li>
                    </ul>
                   <a class="btn btn-mini"><strong><span data-bind="text: Company,click: function() { $root.position.setCompanyId($data); }"></span></strong></a>
                </td>
                <td>
                    <h5 data-bind="text: Location"></h5>
                    <h5 data-bind="text: StartDate"></h5>
                    <h5 data-bind="text: Duration"></h5>
                </td>
                <td>
                    <a  class="btn btn-small"  data-bind="click: function() { $root.position.selectDetailsPosition($data); }" ><i class="icon-zoom-in"></i></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>